<template>
	<view class="wrap">
		<view class="top" @click="goMyInfo">
			<view class="left">
				<image :src="avatarUrl"></image>
				<view class="txt">
					<text class="avatar-txt">{{ nickName }}</text>
					<text class="phone-txt">{{ mobile }}</text>
				</view>
			</view>
			<view class="right">
				<!-- 	<view class="iconfont icon-erweimaData">
					<canvas canvas-id="qrcode" style="width: 60rpx;height:60rpx;" />
				</view> -->
				<canvas class="qrcode" canvas-id="qrcode" style="width: 60rpx;height:60rpx;" />
				<view class="iconfont icon-youjiantou-white"></view>
			</view>
		</view>
		<view class="center">待定</view>
		<view class="list">
			<view class="ul">
				<view class="li" @click="goHref('healthCard')">
					<view class="left">
						<view class="iconfont icon-jiankangzheng"></view>
						<view class="txt">我的健康证<strong></strong></view>
					</view>
					<u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
				</view>
				<view class="li" @click="goHref('mySwimTicket')">
					<view class="left">
						<view class="iconfont icon-yongpiao"></view>
						<view class="txt">我的泳票<strong></strong></view>
					</view>
					<u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
				</view>
				<view class="li" @click="goHref('carryUserList')">
					<view class="left">
						<view class="iconfont icon-xiexingyonghu"></view>
						<view class="txt">携行用户<strong></strong></view>
					</view>
					<u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
				</view>
				<view class="li" @click="goHref('entryRecord')">
					<view class="left">
						<view class="iconfont icon-ruchangjilu"></view>
						<view class="txt">入场记录<strong></strong></view>
					</view>
					<u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
				</view>
				<view class="li" @click="goHref('myInfo')">
					<view class="left">
						<view class="iconfont icon-ruchangjilu"></view>
						<view class="txt">账户设置<strong></strong></view>
					</view>
					<u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
				</view>
				<view class="li" @click="goHref('message')">
					<view class="left">
						<view class="iconfont icon-ruchangjilu"></view>
						<view class="txt">我的消息<strong></strong></view>
					</view>
					<u-icon class="right" slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				avatarUrl: '',
				nickName: '',
				mobile: '',
			}
		},
		onLoad() {},
		onReady() {},
		onShow() {
			this.avatarUrl = uni.getStorageSync('avatarUrl') || require('@/static/img/default-avatar.png');
			let _nickName = uni.getStorageSync('nickName');
			let _mobile = uni.getStorageSync('mobile');
			if (_mobile == '') {
				this.nickName = '您还没有登录'
				this.mobile = '登录享受更多精彩服务~'
			} else if (_mobile != '' && _nickName == '') {
				this.nickName = '昵称'
				this.mobile = uni.getStorageSync('mobile')
			} else if (_mobile != '' && _nickName != '') {
				this.nickName = uni.getStorageSync('nickName')
				this.mobile = uni.getStorageSync('mobile')
			}

			this.getQrcode()
		},
		onHide() {},
		onUnload() {},
		methods: {
			goMyInfo() {
				let user_id = uni.getStorageSync('user_id')
				if (!user_id) {
					uni.showToast({
						title: '请先绑定手机号',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/loginPhone/loginPhone',
						})
					}, 1000)
				} else {
					uni.navigateTo({
						url: '/pagesC/myInfo/myInfo',
					})
				}
			},
			goHref(txt) {
				let user_id = uni.getStorageSync('user_id')
				if (!user_id) {
					uni.showToast({
						title: '请先绑定手机号',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/loginPhone/loginPhone',
						})
					}, 1000)
				} else {
					if (txt == 'healthCard') {
						uni.navigateTo({
							url: '/pagesC/healthCard/healthCard',
						})
					} else if (txt == 'mySwimTicket') {
						uni.navigateTo({
							url: '/pagesC/mySwimTicket/mySwimTicket',
						})
					} else if (txt == 'carryUserList') {
						uni.navigateTo({
							url: '/pagesC/carryUserList/carryUserList',
						})
					} else if (txt == 'entryRecord') {
						uni.navigateTo({
							url: '/pagesC/entryRecord/entryRecord',
						})
					} else if (txt == 'myInfo') {
						uni.navigateTo({
							url: '/pagesC/myInfo/myInfo',
						})
					} else if (txt == 'message') {
						uni.navigateTo({
							url: '/pagesC/message/message',
						})
					}
				}
			},

			//允许转发的默认函数
			onShareAppMessage() {},

			// 生成二维码
			getQrcode() {
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: 'biz=user&user_id=' + uni.getStorageSync('user_id'),
					size: 30,
					margin: 0,
					backgroundColor: '#000',
					foregroundColor: '#fff',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			}
		},
	}
</script>

<style lang="scss">
	@import url('/static/font-alibb/iconfont.css');

	.wrap {
		width: 100%;
		position: relative;
		min-height: 100vh;
		overflow-x: hidden;
		overflow-y: scroll;
		background: #f7f7f8;
	}

	.top {
		width: 100%;
		height: 240rpx;
		// background: linear-gradient(to bottom, #d5ad57, #cfb58a, #f8f8f8);
		background: linear-gradient(to bottom, #d5ad57, #cfb58a);
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.txt {
				margin-left: 20rpx;
				display: flex;
				flex-flow: column;
				justify-content: flex-start;
				align-items: flex-start;
			}

			.avatar-txt {
				// font-weight: bold;
				// font-size: 32rpx;
				color: #fff;
			}

			.phone-txt {
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}

		.right {
			color: #fff;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.qrcode {

				margin-right: 30rpx;
			}
		}
	}

	.center {
		box-sizing: border-box;
		width: 100%;
		height: 120rpx;
		margin: 0 auto;
		background: #252525;
		// margin-top: -180rpx;
		border-radius: 0 0 10% 10%;
		color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 30rpx;
	}

	.list {
		width: 96%;
		border-radius: 15rpx;
		background: rgba(255, 255, 255, 1);
		height: auto;
		margin: 0 auto;

		.ul {
			margin: 0;
			padding: 0;
			margin-top: 10rpx;
			display: flex;
			flex-flow: column;
			justify-content: flex-start;

			.li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				line-height: 100rpx;
				border-bottom: 1px solid #f5f5f0;
				padding: 0 20rpx;

				.left {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.txt {
						margin-left: 15rpx;
						color: $global-fontcolor-black;
						font-weight: 400
					}
				}
			}
		}
	}
</style>